﻿<div class="my-main">
    <div class="ui-box  ui-box-alpha">
        <div class="ui-box-head">
           
                <div class="ui-box-head-title">
                    安全中心</div>
                <span class="ui-box-head-text">修改密码</span> <a href="#" class="ui-box-head-more">
                </a>
           
        </div>
        <div class="ui-box-container">
            <div class="ui-box-content">
                <div class="ui-tiptext-container ui-tiptext-container-message">
                    <p class="ui-tiptext ui-tiptext-message">
                        <i class="ui-tiptext-icon iconfont" title="提示"></i> 密码格式为：至少两个字母、两个数字、一个特殊字符！（字母区分大小写）。
                    </p>
                </div>
            </div>
        </div>
        <div class="ui-box-container-noborder">
            <div class="ui-box-content">
                <form id="form-password-update" class="form-horizontal" method="post">
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <p id="password-update-message" class="form-control-static">
                            &nbsp;</p>
                    </div>
                </div>
                <div id="form-group-for-oldPassword" class="form-group">
                    <label class="col-md-2 control-label" for="oldPassword">
                        原 密 码</label>
                    <div class="col-md-3">
                        <input type="password" id="oldPassword" name="oldPassword" class="form-control" maxlength="12"
                            placeholder="请输入原密码">
                    </div>
                    <div class="col-md-5">
                        <p id="help-block-for-oldPassword" class="help-block">
                            请输入原密码！
                        </p>
                    </div>
                </div>
                <div id="form-group-for-newPassword" class="form-group">
                    <label class="col-md-2 control-label" for="newPassword">
                        新 密 码</label>
                    <div class="col-md-3">
                        <input type="password" id="newPassword" name="newPassword" class="form-control" maxlength="12"
                            placeholder="请输入新密码">
                    </div>
                    <div class="col-md-5">
                        <p id="help-block-for-newPassword" class="help-block">
                            请输入新密码！
                        </p>
                    </div>
                </div>
                <div id="form-group-for-confirmPassword" class="form-group">
                    <label class="col-md-2 control-label" for="confirmPassword">
                        确认密码</label>
                    <div class="col-md-3">
                        <input type="password" id="confirmPassword" name="confirmPassword" class="form-control"
                            maxlength="12" placeholder="请再次输入新密码">
                    </div>
                    <div class="col-md-5">
                        <p id="help-block-for-confirmPassword" class="help-block">
                            请再次输入新密码！
                        </p>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-2 col-md-offset-4">
                        <button id="btn-submit" class="ui-btn ui-btn-alpha" type="submit" data-default-text="更新密码"
                            data-loading-text="提交数据中..." data-success-text="更新成功">
                            更新密码</button></div>
                    <div class="col-md-2">
                        <button type="reset" class="ui-btn ui-btn-beta">
                            取 消</button></div>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
@section css{
}
@section js{
    <script type="text/javascript">
        $(function () {
            $("#form-password-update").validate({
                rules: { 'oldPassword': { required: true, password: true }, 'newPassword': { required: true, password: true }, 'confirmPassword': { required: true, password: true, equalTo: '#newPassword'} },
                messages: { 'oldPassword': { required: '请输入原密码！', password: '6-12位，至少两个字母、两个数字、一个特殊字符！' }, 'newPassword': { required: '请输入新密码！', password: '6-12位，至少两个字母、两个数字、一个特殊字符！' }, 'confirmPassword': { required: '请再次输入新密码！', password: '6-12位，至少两个字母、两个数字、一个特殊字符！', equalTo: '确认密码与新密码不一致！'} },
                submitHandler: function (form) {
                    $('#btn-submit').button('loading');
                    var param = $(form).serialize();
                    $.postJSON(form.action, param, function (result) {
                        if (result.Status == true) {
                            $("#password-update-message").addClass('text-danger').html('更新成功');
                            $('#btn-submit').button('success');
                            setTimeout(function () {
                                $("#password-update-message").removeClass('text-danger').html('&nbsp;');
                            }, 2000);
                        } else {
                            $('#btn-submit').button('default');
                            if (result.Data == 0) {
                                $('#oldPassword').removeClass('success').addClass('invalid');
                                $('#form-group-for-oldPassword').removeClass('has-success').addClass('has-error');
                            }
                            if (result.Data == 1) {
                                $('#newPassword').removeClass('success').addClass('invalid');
                                $('#confirmPassword').removeClass('success').addClass('invalid');

                                $('#form-group-for-newPassword').removeClass('has-success').addClass('has-error');
                                $('#form-group-for-confirmPassword').removeClass('has-success').addClass('has-error');
                            }
                            $("#password-update-message").addClass('text-danger').html(result.Message);
                            setTimeout(function () { $("#password-update-message").removeClass('text-danger').html('&nbsp;'); }, 2000);
                        }
                    });
                    return false;
                },
                validClass: "success",
                errorClass: "invalid",
                errorElement: "span",
                errorPlacement: function (error, element) {
                    var id = $(element).attr('id');
                    $("#help-block-for-" + id).html(error);
                },
                highlight: function (element, errorClass, validClass) {
                    var id = element.id;
                    $(element).removeClass(validClass).addClass(errorClass);
                    $("#form-group-for-" + id).removeClass('has-success').addClass('has-error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    var id = element.id;
                    $(element).removeClass(errorClass).addClass(validClass);
                    $("#help-block-for-" + id).html('&nbsp;');
                    $("#form-group-for-" + id).removeClass('has-error').addClass('has-success');
                }
            });
        });
    </script>
}
